<!--
 * @Description: 
 * @Date: 2023-04-11 21:51:32
 * @LastEditTime: 2023-04-11 21:52:21
 * @Author: Black
 * @FilePath: \store_admin\src\views\order\ShipInfoModal.vue
-->
<template>
	<el-drawer title="物流信息" v-model="dialogVisible" size="40%">
		<el-card shadow="never" class="border-0 mb-3">
			<div class="flex items-center">
				<el-image :src="info.logo" fit="fill" :lazy="true" style="width: 60px;height: 60px;"
					class="rounded border"></el-image>
				<div class="ml-3">
					<p>物流公司：{{ info.typename }}</p>
					<p>物流单号：{{ info.number }}</p>
				</div>
			</div>
		</el-card>
		<el-card shadow="never" class="border-0 border-t">
			<el-timeline class="ml-[-40px]">
				<el-timeline-item :timestamp="item.time" placement="top" v-for="(item, index) in info.list" :key="index">
					{{ item.status }}
				</el-timeline-item>
			</el-timeline>
		</el-card>
	</el-drawer>
</template>

<script setup>
import { ref } from "vue"
import {
	getShipInfo
} from "~/api/order"
import { toast } from "~/composables/util"

const dialogVisible = ref(false)
const info = ref({})
const open = (id) => {
	return getShipInfo(id).then(res => {
		if (res.status != 0) {
			return toast(res.msg, "error")
		}
		info.value = res.result
		console.log(res.result)
		dialogVisible.value = true
	})
}

defineExpose({
	open
})

</script>